﻿<%@ page language="java" pageEncoding="UTF-8"
	errorPage="/ui/defaultException.jsp"%>
<%@include file="/ui/tags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${trip.tripName}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<%@include file="/ui/portal/commonjscss.jsp"%>
</head>
<body>
	<div class="page">
		<%@include file="/ui/portal/head.jsp"%>
		<div id="container" class="container margin10">
			<div class="trip-step4-info-htitle">
				<a href="${cpath }/classify/trip"><b>行程线路</b>&nbsp;</a>&gt;&nbsp;${trip.tripName
				}
			</div>
			<div class=" trip-step4-info">
				<div class=" trip-step4-info-left">
					<div class="trip-step4-info-left-top">
						<div class="info-left-top-t">
							<div class="info-left-top-t-name">${trip.tripName }</div>
							<div class="info-left-top-t-o">
								<div class="ol" style="display: none">212</div>
								<div class="om" style="display: none">145</div>
								<div class="or" style="display: none">333</div>
							</div>
						</div>
						<div class="info-left-top-re">
							<div class="info-left-top-re-day">${trip.tripDays }天</div>
							<div class="info-left-top-re-view"></div>
						</div>
						<div class="info-left-top-img" img-resize='true'>
							<img src="${image_domain }${trip.tripOrigImg}" />
						</div>
						<div class="info-left-top-km">
							<div class="kml"></div>
							<div class="kmm"><fmt:formatNumber value="${trip.tripDistance}" pattern="#" type="number"/>KM</div>
							<div class="kmr"></div>
						</div>
						<div class="info-left-top-exp">
							<c:forEach var="category" items="${categoryStatList }">
								<div class="o-exp1">
									<div class="exp1">
										<img src="${image_domain}${category.categoryImg}"
											alt="" />
									</div>
									<div class="exp1info">
									 <span class="countinfo">${category.categoryCount }</span>
									 <span class="titleinfo">${category.categoryName }</span>
									</div>
								</div>
							</c:forEach>
						</div>
						
						<div class="info-left-top-area2">
                            <div class="n">旅行地：</div>
                            <div class="n2">${dests }</div>
                        </div>
                        <div class="info-left-top-viewdetails">
                            <a href="javascript:void(0)">详细行程>></a>
                        </div>
						<!-- 
                      <div class="info-left-top-line">
                            线路:上海-巴黎-巴黎-香港-上海
                        </div> 
						<div class="info-left-top-country">国家：${countrys }</div>
						<div class="info-left-top-area">目的地：</div>
						-->
					</div>
					<c:set value="${0 }" var="itemCount"></c:set>
					<c:forEach var="tripDay" items="${tripDays }" varStatus="status">
						<div class="trip-step4-info-days"
							trip-day-id="${tripDay.tripDay.tripDayId }"
							trip-day="${tripDay.tripDay.tripDay }"
							trip-day-desc="${tripDay.tripDay.tripDayDesc }">
							<div class="trip-step4-info-days-top">
								<div class="daysl">第${status.count }天</div>
								<div class="daysr">
									<a href="javascript:void(0)" class="viewdetails"
										trip-day-id="${tripDay.tripDay.tripDayId}"> <img
										src="${cpath }/resources/portal/img/trip/p.png" />
									</a>
								</div>
							</div>
							<div class="sidebar">
							<c:forEach var="item" items="${tripDay.tripItems }">
								<div id="item${itemCount }" class="trip-step4-info-model"
									trip-day-id="${tripDay.tripDay.tripDayId }"
									trip-item-id="${item.tripItemId }"
									trip-img="${image_domain }${item.miniImg}"
									trip-summary="${item.summary }" trip-title="${item.titleZh }"
									trip-dest-id="${item.destId }" trip-dest="${item.destName }"
									trip-category-img="${image_domain }${item.categoryImg}"
									trip-category-id="${item.categoryId }"
									trip-stay-time="${item.pauseTime }" trip-lat="${item.lat }"
									trip-lng="${item.lng }">
									<div class="step4-info-model-top">
										<div class="step4-info-model-title">${item.titleZh }</div>
										<div class="step4-info-model-view">
											<c:if test="${item.categoryId != 3 }">
												<a href="${cpath}/destination/${item.destId}/item/${item.relId}"
													target="_blank">查看详情>></a>
											</c:if>
											<c:if test="${item.categoryId == 3 }">
												<a href="${cpath}/hotel/${item.hotelId}" target="_blank">查看详情>></a>
											</c:if>
										</div>
									</div>
									<div class="step4-info-model-img">
										<img class="lazy"
											data-original="${image_domain }${item.origImg}"
											src="${cpath}/resources/portal/img/grey.gif"
											alt="${item.titleZh}"  />
									</div>
									<div class="step4-info-model-o" style="display: none">
										<div class="or" style="display: none">333</div>
										<div class="om" style="display: none">145</div>
										<div class="ol" style="display: none">212</div>
									</div>
									<div class="step4-info-model-note">${item.itemDesc }</div>
									<div class="clear1"></div>
								</div>
								<c:set value="${itemCount+1 }" var="itemCount"></c:set>
							</c:forEach>
							</div>
							<div class="clear"></div>
						</div>
					</c:forEach>

					<div class="clear1"></div>
				</div>

				<div class="trip-step4-info-right" data-spy="affix" data-offset-top="40" data-offset-bottom="40">
					<div class="trip-step4-info-right-top-title">
						<div class="til"></div>
						<div class="tim">每日行程</div>
						<div class="tir"></div>
					</div>
					<div class="trip-step4-info-right-days-info"  >
						<div class="clear"></div>
						<div class="trip-step4-info-right-days-lines"></div>
						<div class="days-list"  id="myAffix">
							<c:set value="${0 }" var="itemCount"></c:set>
							<c:forEach var="tripDay" items="${tripDays }" varStatus="status">
								<div class="days-model">
									<div class="days-model-title"> 
										<img src="${cpath }/resources/portal/img/trip/p.png" />
										第${status.count }天
										</div>
									<c:forEach var="item" items="${tripDay.tripItems }" varStatus="daystatus">
										<div class="days-model-info">
											<span class="infocc">${daystatus.count}</span>
											<a href="#item${itemCount }"><em title="${item.titleZh }">${item.titleZh }</em></a>
                                    		<span class="infodd"><img src="${image_domain }${item.categoryImg}" /></span>
										</div>
										<c:set value="${itemCount+1 }" var="itemCount"></c:set>
									</c:forEach>
								</div>
							</c:forEach>
							<div class="clear"></div>
						</div>
					</div>
				</div>
			</div>

			<div class=" clear1"></div>
		</div><!-- container end -->

		 <!--每天行程的弹出页面 start-->
        <div class="trip-area-step3-info popdialog2" style="display: none;">
            <div class="trip-area-step3-info-title"><!-- 行程的第几天的标题 --></div>
            <div class="trip-area-step3-info-map"><!-- 地图区域 --></div>
            <div class="trip-area-step3-info-list">
                <div class="step3-info-lines">
                </div>
                <div class="step3-info-title">
                	<!--  目的地名称显示
                    <img src="img/trip/p.png" />&nbsp;圣魔历次 巴黎
                     -->
                </div>
                <div class="step3-info-title2">
                    <div class="infoa">
                        <!--  5 地点-->
                    </div>
                    <div class="infob">
                         <!-- 100 公里-->
                    </div>
                    <div class="infoc">
                        <!--8 小时-->
                    </div>
                </div>
                <div class="step3-info-l">
                	<!--  
                    <div class="step3-info-m">
                        <div class="step3-info-m-cl">
                            <img src="img/trip/1.png" />
                        </div>
                        <div class="step3-info-m-img">
                            <img src="assets/1000500.jpg" />
                        </div>
                        <div class="step3-info-m-title">
                            圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎
                            <img src="" />
                        </div>
                        <div class="step3-info-m-time">
                            60分钟
                        </div>
                        <div class="step3-info-m-note">
                            圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次
                            巴黎 圣魔历次 巴黎圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎
                        </div>
                    </div>
                    <div class="step3-info-m-other">
                        <span class="otherlength">距离：<img src="img/trip/walk.png" />
                            2km</span> 
                         <span class="othertime">
                                <img src="img/trip/time.png" />5分钟</span> 
                          <span class="otherline"></span>
                    </div>
                    <div class=" clear">
                    </div>-->
                </div>
            </div>
            <div class="step3-info-info">
            	<!-- 每天行程的描述 
                <img src="img/trip/e.png" />
                这里提供豪华租赁复古舞这里提供豪华租-->
            </div>
            <div class=" clear1">
            </div>
        </div>
         <!--每天行程的弹出页面 end-->
         
         <div class="trippopdetails" style="display: none;"><!-- 行程俯瞰列表  start-->
         </div><!-- 行程俯瞰列表  end-->
         <%@include file="/ui/portal/footer.jsp"%> 
         <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXF4z-R35SvrcxQNsQJUd6JIs4X1fAoZw&sensor=false"></script>
         <script src="${cpath}/resources/portal/js/distance.js" type="text/javascript"></script>
         <script src="${cpath}/resources/portal/js/jquery.form.js" type="text/javascript"></script>
         <script src="${cpath}/resources/portal/js/jquery.blockUI.js" type="text/javascript"></script>
         <script src="${cpath}/resources/portal/js/trip_sort.js" type="text/javascript"></script>
         <script src="${cpath}/resources/portal/js/layer-v1.7.0/layer/layer.min.js" type="text/javascript"></script>
         <script src="${cpath}/resources/mobile/js/lazyload/jquery.lazyload.js"></script>
         
		 <script type="text/javascript">
			var path = '${cpath}';
   			var map = new TMap({cpath:path});
		
			$(function() {
				$("img.lazy").lazyload();
				var linesheight = $(".days-list").height();
				$(".trip-step4-info-right-days-lines").height(linesheight);
				//alert(linesheight);
				//$("#add_image").click(addImage);
				//绑定每天行程地图事件
			    $(".viewdetails").click(function () {
			    	var tripDayId = $(this).attr("trip-day-id");
	                Trip.layerTripDayOverlook(tripDayId, map);
	            });
			    $(".info-left-top-viewdetails").click(function(){
					Trip.layerTripOverlook(path);
				});
			    
			    /*
s			    var navHeight = $('.header').outerHeight(true) + 10;
				$(".trip-step4-info-right").scrollspy({
					offset:navHeight,
					selector:".trip-step4-info-right a",
					active:function(e,target,nav){
						var $c = nav.parent().parent();
						nav.addClass("active");
					},
					unactive:function(e,target,nav){
						nav.removeClass("active");
					}
				});
				
				setTimeout(function () {
				      var $sideBar = $('.sidebar');

				      $sideBar.affix({
				        offset: {
				          top: function () {
				            var offsetTop      = $sideBar.offset().top;
				            var sideBarMargin  = parseInt($sideBar.children(0).css('margin-top'), 10);
				            //var navOuterHeight = $('.bs-docs-nav').height()

				            //return (this.top = offsetTop - navHeight - sideBarMargin)
				            return (this.top = offsetTop);
				          }
				        , bottom: function () {
				            return (this.bottom = $('.footer').outerHeight(true))
				          }
				        }
				      })
				    }, 100);*/
			    

			    /*
			    var $window = $(window);
			    var $body   = $(document.body);

			    $body.scrollspy({
			      target: '.days-list',
			      offset: 100
			    });

			    $window.on('load', function () {
			      $body.scrollspy('refresh')
			    })
			    
			    $('#myAffix').affix({
			        offset: {
			          top: 100,
			          bottom: function () {
			            return (this.bottom = $('.footer').outerHeight(true))
			          }
			        }
			      });*/
			});
		</script>
	</div>
</body>
</html>
